<style lang="less" rel="stylesheet/less">
  .buy-wrapper{
    .buy-goods{
      padding: 20/75rem 30/75rem;
      background-color: #fff;
      display: flex;
      margin-top: 32/75rem;
      .p-pic{
        width:90/75rem;
        height: 90/75rem;
        margin-right: 18/75rem;
        background-color: #f0f0f0;
      }
      .right{
        flex: 1;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        font-size: 30/75rem;
        line-height: 1;
      }
    }
    .title{
      font-size: 30/75rem;
      padding: 30/75rem ;
    }
    .buy-logistics{
      padding: 20/75rem 30/75rem;
      background-color: #fff;
      .p-choose{
        .label{
          display: inline-block;
          width: 214/75rem;
          height: 80/75rem;
          line-height: 80/75rem;
          font-size: 26/75rem;
          text-align: center;
          background-color: #fff;
          border: 1px solid ;
          margin-right: 15/75rem;
          &.select{
            background-color: #ffb230;
            border-color:#ffb230;
            color: #fff;

          }
        }
      }
      p{
        font-size: 30/75rem;
        margin-top: 15/75rem;
      }
    }
    .buy-numble{
      display: flex;
      padding: 30/75rem 30/75rem;
      background-color: #fff;
      justify-content: space-between;
      margin-top: 28/75rem;
      font-size: 30/75rem;
    }
    .buy-address{
      margin-top: 28/75rem;
    }
    .buy-pay{
      .Icon-check {
        fill: #ffb230;
      }
      .icon-left{
        display: inline-block;
        vertical-align: middle;
        width: 50/75rem;
        height: 50/75rem;
        svg{
          width: 50/75rem;
          height: 50/75rem;
          fill: #42b035;
        }
      }
    }
    .buy-footer{
      margin-top: 28/75rem;
      height: 94/75rem;
      display: flex;
      z-index: 500;
      padding: 0 20/75rem;
      .btn-pay {
        width: 100%;
        display: block;
        text-align: center;
        height: 94/75rem;
        border-radius: 10/75rem;
        line-height: 94/75rem;
        background-color: #ffb230;
        font-size: 30/75rem;
        color: #fff;
        &:active {
          background-color: ligten(#ffb230, 10%);
        }
      }
    }
  }
</style>

<template>
  <div class="buy-wrapper" v-if="renegade.isload">
    <svg xmlns="http://www.w3.org/2000/svg" style="position: absolute;width: 0;height:0;left: 0;top: 0;">
      <symbol id="wechat" viewBox="0 0 1024 1024">
        <path d="M390.21952 631.09248c-61.26464 34.01984-70.35136-19.09888-70.35136-19.09888l-76.78208-178.46656c-29.54368-84.80512 25.56928-38.23744 25.56928-38.23744s47.2896 35.63392 83.17952 57.34784c35.87072 21.71392 76.75776 6.3744 76.75776 6.3744l501.9648-230.7776C837.94688 113.4528 684.96256 38.4 511.76576 38.4 229.11104 38.4 0 238.13248 0 484.52864c0 141.72544 75.8656 267.8656 194.0352 349.62176l-21.31072 122.01856c0 0-10.38848 35.6224 25.61536 19.10016 24.53376-11.26528 87.0784-51.63392 124.30976-76.20224 58.53056 20.31616 122.2976 31.5968 189.14432 31.5968 282.63168 0 511.79008-199.73248 511.79008-446.13376 0-71.36896-19.31008-138.76864-53.51552-198.59456C810.14144 381.7792 438.15808 604.51712 390.21952 631.09248L390.21952 631.09248 390.21952 631.09248zM390.21952 631.09248" p-id="3020"></path>
      </symbol>
    </svg>
    <goga-header title="购买">
      <div slot="left">
        <span @click="goBack">
          <icon symbol="back"> </icon>
        </span>
      </div>
    </goga-header>
    <div class="buy-goods">
      <div class="p-pic">
        <img v-lazy="'http://www.gogagoga.cc/picfile/'+ renegade.goodsInfo.goPic01" alt="">
      </div>
      <div class="right">
        <div class="p-name">{{renegade.goodsInfo.goName}}</div>
        <div class="p-price">助力价：¥{{renegade.userInfo.pMoney}}</div>
      </div>
    </div>
    <div class="title">
      物流选择
    </div>
    <div class="buy-logistics">
      <div class="p-choose">
        <a href="#" @click.prevent="oPickUp=0" class="label" :class="{select: oPickUp==0}">跑腿/快递</a>
        <a href="#" @click.prevent="oPickUp=1" class="label" :class="{select: oPickUp==1}">自提(立减8元)</a>
      </div>
      <p>*自提点：温州市-信河街-大士门大厦1幢105号</p>
    </div>
    <div class="buy-address" @click="visable=true">
      <cell title="收货信息"   is-link>
        <icon symbol="right"></icon>
      </cell>
    </div>
    <div class="buy-numble">
      <div class="p-tit">
        数量（有货）
      </div>
      <div class="p-control">
        1份
      </div>
    </div>
    <div class="title">
      支付方式
    </div>
    <div class="buy-pay">
      <cell title='微信支付' is-link>
        <div slot='icon' class='icon-left'><icon symbol="wechat"></icon></div>
        <span class='pay-r' ><icon symbol="check" ></icon></span>
      </cell>
    </div>
    <div class="buy-footer">

        <button type="button" class="btn-pay" :disabled="disabled" @click="submit">
          立即支付（￥{{price}}）
        </button>
    </div>
    <address-box v-model="visable"></address-box>
  </div>
</template>

<script>
  import store2 from 'store2'
  import {isWechat, cookie} from '@utils'
  import api from '@api'
  import {mapGetters} from 'vuex'
  import gogaHeader from '@components/goga-header'
  import Icon from '@components/icon'
  import Cell from '@components/cell'
  import AddressBox from './address.vue'
  export default {
    components: {
      gogaHeader,
      Icon,
      Cell,
      AddressBox
    },
    computed: {
      ...mapGetters({
        renegade: 'backend/renegade/getData'
      }),
      price() {
        let price = this.renegade.userInfo.pMoney;
        return this.oPickUp? price - 8: price
      }
    },
    data() {
      return {
        visable: false,
        oName: '',
        oPhone: '',
        oPickUp: 0,
        oAddress: '',
        disabled: false
      }
    },
    async mounted () {
      document.title = "楠溪峰高山蓝莓预购助力";
      this.$store.dispatch('global/setLoading', true);
      if(!this.renegade.isLoad) {
        await this.$store.dispatch('backend/renegade/getData', 'LM001')
      }
      this.getAddress();
      this.$store.dispatch('global/setLoading', false);
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      getAddress() {
        if(store2.has('renegade-address')) {
          let address = JSON.parse(store2('renegade-address'));
          this.oName = address.name;
          this.oPhone = address.phone;
          this.oAddress = address.area + address.detail
        }
      },
      async submit() {
        let _this = this;
        if (this.oPickUp === 0 && (this.oName === '' || this.oPhone === '' || this.oAddress === '')) {
          this.$store.dispatch('global/toast', '请选择地址');
          return
        }
        this.$store.dispatch('global/setLoading', true);
        let {data: {payConfig, StatusCode, Status}} = await api.post('api/v2/Bargain/addBargainOrder.ashx', {
          goSn: 'LM001',
          oAddress: this.oAddress,
          oPickUp: this.oPickUp,
          oPhone: this.oPhone,
          oName:this.oName
        })
        if(StatusCode === '200') {
          let config = payConfig[0];
          window.wx.chooseWXPay({
            timestamp: config.timeStamp,
            nonceStr: config.nonceStr,
            package: config.package,
            signType: config.signType,
            paySign: config.paySign,
            success: res => {
              _this.$store.dispatch('global/setLoading', false);
              _this.$store.dispatch('global/toast', '支付成功');
              window.location.href= 'http://m.gogagoga.cc/#!/success/' + config.orderSn
            },
            cancel: () => {
              _this.$store.dispatch('global/setLoading', false);
            },
            error: () => {
              _this.$store.dispatch('global/setLoading', false);
            }
          })
        } else {
          _this.$store.dispatch('global/toast', Status);
        }
      }
    }
  }
</script>
